import React, { useState, useEffect } from 'react';
import Scrollbars from 'react-custom-scrollbars';
import './index.scss'



function App(props) {

    const [headerList, setHeaderList] = useState([]);   //表头list  支持width（宽度）,title(表头名称), className
    const [bodyList, setBodyList] = useState([]);   //内容list 支持className,showTitle(是否显示title),title(title要显示的内容),content（内容）格式[[{c1},{c2},{c3}],[{c1},{c2},{c3}],[{c1},{c2},{c3}],[{c1},{c2},{c3}],[{c1},{c2},{c3}],[{c1},{c2},{c3}],[{c1},{c2},{c3}]]【c1,c2,c3为单列的值】

    useEffect(() => {
        setHeaderList(props.headerList||[])
        setBodyList(props.bodyList||[])
    }, [props.headerList,props.bodyList]);

    return (
        <div className="myTable">
            <div className="tableHeader">
                {
                    headerList.map(item=>{
                        return (
                            <div 
                                title={item.title} 
                                className={ item.className||""} 
                                style={{width: item.width || "10%"}}>
                                {item.title}
                            </div>
                        )
                    })
                }
            </div>
            <Scrollbars autoHeight autoHeightMax={"calc(100vh - 290px)"}>
            <div className="tableBody">
                {
                    bodyList.map(item=>{
                        return (
                            <div className="tableRow" onClick={
                                (item[0] && item[0].clickEven) || null}>
                                {
                                    item.map(child=>{
                                        
                                        return (
                                            <div 
                                                className={child.className?("tableItem "+child.className): "tableItem"} 
                                                title={child.showTitle?child.title:""} 
                                                style={{width: child.width || "10%"}}
                                                onClick={ child.clickEven || null }
                                                >{child.content}</div>
                                        )
                                    })
                                }
                            </div>
                        )
                    })
                }
            </div>
            </Scrollbars>
        </div>
    )
}

export default App;